<template>
  <div class="dashboard-content" style="position:absolute;width:100%;">
    <el-card shadow="none" :body-style="{padding: '0px', position:'absolute', height:'100%', width: '100%'}">
      <div class="card-box clearfix" style="height:100%;">
        <i class="box-title-icon fontColor" :class="content.icon"></i>
        <template>
          <el-tabs v-model="activeName" class="tabs">
            <el-tab-pane :label="content.name" name="first">
              <div class="tabs-content-box" style="width: 95%; height: 100%;">
                <!--<div id="chart" :style="{width: '100%', height: '100%'}" auto-resize></div>-->
                <v-chart :options="barOption" :style="{width: '100%', height: '100%'}" :autoresize="true"> </v-chart>
              </div>
            </el-tab-pane>
          </el-tabs>
        </template>
        <!--<el-button class="btn-more" type="text">
          <a href="#">MORE</a>
        </el-button>-->
      </div>
    </el-card>
  </div>
</template>

<script>
//let echarts = require('echarts/lib/echarts');
import ECharts from '~/static/js/vue-echarts';
import { barChart } from './data/Content.js';
//import option from '/portal/data/ChartsData.json';
require('echarts/lib/chart/bar');
require('echarts/lib/chart/line');
require('echarts/lib/chart/pie');
require('echarts/lib/component/tooltip');
require('echarts/lib/component/title');
export default {
    name: 'bar-chart',
    props: ['content'],
    data(){
        return {
            activeName: 'first',
            barOption: {}
        };
    },
    components: {
        'v-chart': ECharts
    },
    methods: {

    },
    mounted() {
        this.$axios.get(barChart.url)
            .then(res => {
                //console.log(res.data);
                this.barOption = res.data;
            });
        //console.log(this.content);
    }
};
</script>

<style>
  .dashboard-content{
    height: 100%;
  }
  .dashboard-content .el-card{
    border: none;
  }
  .el-tabs__content {
    height:78%;
  }
  .el-tab-pane{
    height:100%;
  }
  .tabs.el-tabs.el-tabs--top{
    height: 100%;
  }
</style>
<style scoped lang="scss">
  .card-box {
    font-size: 18px;
    border: none;

    .tabs-content-box{
      height: 100%;
    }
  }
</style>
